pp108 : Setting Themes at the Organization Level

Setting Themes at the Organization Level
This topic provides an overview about Organization Level Theme.

This feature is available only if you can do any of the following:

  • deploy applications to Organization space
  • publish projects to Organization space.

Organization level theme helps incorporate certain custom styling features at the organization level. It is one of the key business requirements for certain deployment scenarios. Consider a cloud deployment model in which a single application deployed on a cloud is being used by multiple tenants. Organization level theme allows you to customize, test, and deploy organization-specific theme packs for each tenant in the cloud according to specific application requirements.
The theme-pack files for an organization are stored in the Web server. These files can be of type Javascript(js), Web pages (HTM, HTML), images, icons (gif, png, jpg, bmp) and cascading style sheets(css). In Process Platform, the most commonly used theme-packs comprise of cascading style sheets, images, and, icons.
When you access a custom application developed using Process Platform, the corresponding themes will be applied to the application from the respective organization.

Note:

1. When you want to add a web file to the user interface, do not specify the virtual root name or the organization name in the relative path. If the file is located at <Process_Platform_Installation_Directory>/webroot/<Organization Name>/folder1/folder2/sample.jpg, the path in the user interface must be folder1/folder2/sample.jpg.
2. When using the web artifacts in the html pages use as the below. 
 webroot | - shared | - images | - cordys.gif | - organization | - dummyORG (your organization) | - images |- icon.gif | - example | - x.htm
without application.js 
<html>
    <body>
        <img src="../images/icon.gif"/>
        <!-- relative to page folder -->
        <img src="../images/cordys.gif"/>
    </body>
</html>
with application.js (e.g. any XForm) 
<html>
    <head>
        <import src="../wcp/application.js"/>
        <!-- only real relative reference -->
    </head>
    <body>
        <img src="images/icon.gif"/>
        <!-- relative to application root -->
        <img src="images/cordys.gif"/>
    </body>
</html>